<template>
<div class="recommend">

  <div class="top-card">
    <div class="icon-warp">
      <img :src="topList.coverImgUrl" alt="">
    </div>
    <div class="content-warp">
      <div class="tag">精品歌单</div>
<!--      <div class="title">-->
<!--        {{topList.name}}-->
<!--      </div>-->
        <div class="info">
          {{topList.description}}
        </div>
      </div>
    <img :src="topList.coverImgUrl" alt="" class="bg">
      <div class="bg-mask">

      </div>
    </div>

  <div class="tab-container">
      <div class="tab-bar">
        <span class="item" @click="tag = '全部'" :class="{ active: tag === '全部' }">全部</span>
        <span class="item" @click="tag = '欧美'" :class="{ active: tag === '欧美' }">欧美</span>
        <span class="item" @click="tag = '华语'" :class="{ active: tag === '华语' }">华语</span>
        <span class="item" @click="tag = '流行'" :class="{ active: tag === '流行' }">流行</span>
        <span class="item" @click="tag = '说唱'" :class="{ active: tag === '说唱' }">说唱</span>
        <span class="item" @click="tag = '摇滚'" :class="{ active: tag === '摇滚' }">摇滚</span>
        <span class="item" @click="tag = '民谣'" :class="{ active: tag === '民谣' }">民谣</span>
        <span class="item" @click="tag = '电子'" :class="{ active: tag === '电子' }">电子</span>
        <span class="item" @click="tag = '轻音乐'" :class="{ active: tag === '轻音乐' }">轻音乐</span>
        <span class="item" @click="tag = '影视原声'" :class="{ active: tag === '影视原声' }">影视原声</span>
        <span class="item" @click="tag = 'ACG'" :class="{ active: tag === 'ACG' }">ACG</span>
        <span class="item" @click="tag = '怀旧'" :class="{ active: tag === '怀旧' }">怀旧</span>
        <span class="item" @click="tag = '治愈'" :class="{ active: tag === '治愈' }">治愈</span>
        <span class="item" @click="tag = '旅行'" :class="{ active: tag === '旅行' }">旅行</span>
      </div>
    </div>
    <div class="tab-content">
      <div class="items">
        <div class="item" v-for="(item,index) in list" :key="index"  @click="toPlaylist(item.id)">
          <div class="img-wrap">
            <div class="desc-wrap">
              <span class="desc">{{item.playCount}}</span>
              <span class="play"><img src="../assets/images/play.png" alt=""></span>
            </div>
            <img :src="item.coverImgUrl" alt="">
          </div>
          <p class="name">{{item.name}}</p>
        </div>
      </div>
    </div>

  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :page-size="10"
      :current-page="page"
      :total="total">
  </el-pagination>

</div>
</template>

<script>
import axios from "axios";

export default {
  name: "recommend",
  data(){
    return {
      //总条数
      total:0,
      //页码
      page:1,
      //顶部的推荐歌单
      topList:{},
      //歌单列表
      list:[],
      tag:'全部'
    };
  },
  watch:{
    tag(){
      this.topData()
      this.listData()
      //修改页码为1
      this.page = 1
    }
  },
  created(){
    this.topData()
    this.listData()

  },
  methods:{
    //顶部的精品歌单
    topData(){
      axios({
        url:'https://autumnfish.cn/top/playlist/highquality',
        method : 'get',
        params:{
          limit:'1',
          cat:this.tag
        }
      }).then(res=>{
        // console.log(res)
        this.topList = res.data.playlists[0]
      })
    },

    //列表数据
    listData(){
      axios({
        url:'https://autumnfish.cn/top/playlist/',
        method:'get',
        params:{
          limit: 10,
          // 起始的值 （页码-1）*每页多少条数据
          offset: (this.page -1)*10,
          cat: this.tag
        }
      }).then(res=>{
        console.log(res)
        this.total = res.data.total
        this.list = res.data.playlists
      })
    },
    //页码改变事件
    handleCurrentChange(val){
      // console.log(`当前页: ${val}`)
      this.page = val
      this.listData()
    },
    toPlaylist(id){
      this.$router.push(`/playlist?id=${id}`)
    }


  }
}
</script>

<style scoped>
.recommend{
  width: 1100px;
  height: 880px;
  margin: auto;

}
.recommend .top-card{
  width: 1100px;
  height: 200px;
  position: relative;
  overflow: hidden;

}
.recommend .top-card .icon-warp{
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 1000;
}
.recommend .top-card .icon-warp img{
  width: 160px;
  height: 160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.recommend .top-card .content-warp{
  width: 880px;
  height: 160px;
  position: absolute;
  top: 50%;
  left: 59%;
  transform: translate(-50%,-50%);
}
.recommend .top-card .content-warp .tag{
  width: 100px;
  height: 30px;
  border: 1px #ffa22d solid;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  color: #ffa22d;
}
.recommend .top-card .content-warp .info{
  margin-top: 15px;
  width: 880px;
  height: 100px;
  color: #c6c6c6;
  font-size: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.recommend .top-card .bg{
  width: 1100px;
  height: auto;
  position: absolute;
  top: 0;
  z-index: -999;
  filter: blur(8px);
}
.recommend .top-card .bg-mask{
  width: 1100px;
  height: 200px;
  display: block;
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
}

/*tab栏*/
.tab-container{
  width: 1100px;
  margin-top: 40px;
  margin-bottom: 50px;
}

.tab-container .tab-bar{
  float: right;
  height: 20px;
  cursor: pointer;
}
.tab-container .tab-bar .item{
  padding: 0 10px;
}
.active {
  color: #ffa22d;
}

.tab-content{
  width: 1100px;
  margin-top: 90px;

}
.tab-content .items {
  /*position: relative;*/
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tab-content .item{
  width: 200px;
  margin-bottom: 30px;
}
.tab-content .img-wrap{
  width: 200px;
  height: 200px;

}
.tab-content .img-wrap img{
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}
.tab-content .desc-wrap span{
  position: absolute;
  display: block;
  width: 200px;
  height: 30px;
  color: #ffffff;
  border-radius: 5px;
  background-color: rgba(0,0,0,0.3);
}
.tab-content .item .name{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tab-content .img-wrap .desc-wrap .play img{
  height: 40px;
  width: 40px;
  position: absolute;
  right: 3px;
  top: 156px;
  cursor: pointer;
}

</style>